import Qt 4.7

Flipable {
    id: container
    state: ""

    signal clicked(string cardValue)
    property string value: ""
    property string theme: "futu"

    property bool disableFlip: false
    property bool flipped: false
    property int angle: 0

    height: 480
    width: height * 0.67375

    // Front side of the card
    front: BorderImage {
        id: frontImage
        anchors.fill: container
        border {
            top: 10
            bottom: 10
            left: 10
            right: 10
        }

        source: "gfx/" + theme + "/" + value + ".png"
        smooth: true

        // Bottom right corner mouse area on top of previous one for flipping the card
        MouseArea {
            id: flipMouseArea
            anchors {
                fill: parent
            }
            z: 200
            onClicked: {
                if (!disableFlip)
                    container.flipped = !container.flipped
            }
        }
    }
    // Back side of the card
    back: BorderImage {
        id: backImage
        anchors.fill: container
        border {
            top: 10
            bottom: 10
            left: 10
            right: 10
        }
        source: "gfx/" + theme + "/back.png"
        smooth: true
        // Full card size mousearea to emit clicked-signal
        MouseArea {
            anchors.fill: backImage
            onClicked: container.flipped = !container.flipped
        }

    }

    transform: Rotation {
        origin.x: container.width/2; origin.y: container.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
        angle: container.angle
    }

    states: State {
        name: "back"
        PropertyChanges { target: container; angle: 180 }
        when: container.flipped
    }

    transitions: Transition {
        NumberAnimation { properties: "angle"; duration: 300}
    }

}
